import React from "react";
import {ActionIcon, ActionIconGroup, Tooltip} from "@mantine/core";
import {IconZoomIn, IconZoomOut, IconViewportTall} from "@tabler/icons-react";
import {Core} from "cytoscape";

const handleZoom = (cy: Core, type: "in" | "out" | "fit") => {
  if (!cy) return;
  // 默认缩放中心在左上角，需要改成视窗中心
  const center = {x: cy.width() / 2, y: cy.height() / 2};
  if (type === "in") {
    cy.zoom({
      level: cy.zoom() * 1.2,
      renderedPosition: center,
    });
  } else if (type === "out") {
    cy.zoom({
      level: cy.zoom() * 0.8,
      renderedPosition: center,
    });
  } else if (type === "fit") {
    cy.fit(cy.elements(), 30);
  }
};

export const IpdGraphZoom = ({cy}: {cy: Core}) => {
  return (
    <ActionIconGroup>
      <Tooltip
        label="放大"
        withArrow
        position="bottom"
        transitionProps={{transition: "fade", duration: 300}}
      >
        <ActionIcon variant="default" onClick={() => handleZoom(cy, "in")}>
          <IconZoomIn size={16} stroke={1.5} />
        </ActionIcon>
      </Tooltip>

      <Tooltip
        label="缩小"
        withArrow
        position="bottom"
        transitionProps={{transition: "fade", duration: 300}}
      >
        <ActionIcon variant="default" onClick={() => handleZoom(cy, "out")}>
          <IconZoomOut size={16} stroke={1.5} />
        </ActionIcon>
      </Tooltip>

      <Tooltip
        label="适合"
        withArrow
        position="bottom"
        transitionProps={{transition: "fade", duration: 300}}
      >
        <ActionIcon variant="default" onClick={() => handleZoom(cy, "fit")}>
          <IconViewportTall size={16} stroke={1.5} />
        </ActionIcon>
      </Tooltip>
    </ActionIconGroup>
  );
};
